@import '@/less/common.less';

page {
  padding: 0px 20px 0px 20px;
}

.index {
  color: #333333;

  .banner {
    .banner-swiper {
      background: #ffffff;
      border-radius: 10px;
      height: 400px;
      border-radius: 15px;
      overflow: hidden;
      .shadow();

      .swiper-item {
        height: 100%;

        Image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .search {
    .van-search__content {
      .shadow();
    }
  }

  .nav {
    .flex();
    height: 150px;
    justify-content: space-around;
    align-items: center;
    padding: 0 30px;
    background: #ffffff;
    margin-top: 20px;
    .shadow();
    .radius();

    .nav-item {
      // border-radius: 5px;
      // border: 5px solid #ffffff;
      // box-shadow: 5px 5px 2px rgba(0, 0, 0, .3);
      padding: 5px;
      .flex-center();
      flex-direction: column;
      font-weight: bold;
      color: #333333;

      Image {
        width: 50px;
        height: 50px;
      }

      .nav-item-text {
        margin-top: 10px;
      }

      font-size: 20px;
    }
  }

  .flip-box {
    width: 600px;
    height: 600px;
    perspective: 500;

    .flip-item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 1s ease-in-out;
      backface-visibility: hidden;
    }

    .flip-item-front {
      position: relative;

      .penguin {
        Image {
          .radius();
          width: 100%;
          height: 100%;
        }
      }
    }

    .flip-item-back {
      transform: rotateY(-180deg);
      background: yellow;
      animation: light 1s linear infinite alternate;
      .radius();

      .random-img {
        height: 100%;
        position: relative;
        .radius();
        overflow: hidden;

        &::after {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          animation: lightInset 1s linear infinite alternate;
        }
      }

      Image {
        width: 100%;
        height: 100%;
      }

      .title {
        text-align: center;
        position: absolute;
        padding: 10px 20px;
        background: rgba(0, 0, 0, .5);
        bottom: 0;
        width: 100%;

        .ibl {
          display: inline-block;
          text-align: left;
        }

        Text {
          .omit-two();
          font-size: 30px;
          color: #ffffff;
          font-weight: bold;
        }
      }
    }

    &.flip .flip-item-front {
      transform: rotateY(180deg);
    }

    &.flip .flip-item-back {
      transform: rotateY(0deg);
    }
  }

  .btn-shake {
    margin-top: 50px;
    color: #ffffff;
    background-color: @themeColor;
    height: 80px;
    font-size: 35px;
    font-weight: bold;
    padding: 10px 10px;
    position: relative;
    .flex-center();
    .radius();

    Image {
      position: absolute;
      right: 30%;
      width: 50px;
      height: 50px;
    }
  }

  .pop-close {
    margin-top: 30px;
    text-align: center;
  }
}

@keyframes light{
  from{
    background: yellow;
    box-shadow: 0 0 5px yellow,
      0 0 25px yellow,
      0 0 45px yellow;
  }to{
    background: yellow;
    box-shadow: 0 0 45px yellow,
      0 0 25px yellow,
      0 0 5px yellow;
  }
}

@keyframes lightInset{
  from{
    box-shadow: inset 0 0 5px yellow,
            inset 0 0 25px yellow,
            inset 0 0 45px yellow;
  }to{
    box-shadow: inset 0 0 45px yellow,
      inset 0 0 25px yellow,
      inset 0 0 5px yellow;
  }
}